<template>
    <app-layout>
        <view class="weitao-detail">
            <view class="detail-head" v-if="start">
                <view class="detail-head-label">{{ detail.title }}</view>
                <view class="detail-head-show-title cross-center main-between">
                    <view>{{ detail.read_number }}人浏览</view>
                    <view class="detail-head_share dir-left-nowrap cross-center" @click="isShare = true">
                        <image src="../image/weitao-detail-share.png"></image>
                        <view>分享</view>
                    </view>
                </view>
            </view>

            <view class="detail-diy">
                <block v-for="(temp, index) in detail.detail" :key="index">
                    <template v-if="temp.id === 'mch-goods'">
                        <view :style="[
                             {'background-color':`${temp.data.backgroundColor}`,
                            'padding': `${temp.data.c_padding_top}rpx ${temp.data.c_padding_lr}rpx ${temp.data.c_padding_bottom}rpx`,
                            'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
                            'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
                            'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
                            'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}]"
                        >
                            <app-diy-goods-list
                                v-bind:buy-btn-text-color="temp.data.buyBtnTextColor"
                                v-bind:buy-btn-pic="temp.data.buyBtnPic"
                                v-bind:goods-end-color="temp.data.goodsEndColor"
                                v-bind:goods-border-color="temp.data.goodsBorderColor"

                                v-bind:show-buy-btn="temp.data.showBuyBtn"
                                v-bind:list="temp.data.list"
                                v-bind:list-style="temp.data.listStyle"
                                v-bind:goods-cover-proportion="temp.data.goodsCoverProportion"
                                v-bind:fill="temp.data.fill"
                                v-bind:goods-style="temp.data.goodsStyle"
                                v-bind:show-goods-name="temp.data.showGoodsName"
                                v-bind:text-style="temp.data.textStyle"
                                v-bind:sign="temp.id"
                                v-bind:button-color="temp.data.buttonColor"
                                v-bind:buy-btn-style="temp.data.buyBtnStyle"
                                v-bind:buy-btn-text="temp.data.buyBtnText"
                                v-bind:show-goods-tag="temp.data.showGoodsTag"
                                v-bind:page-hide="false"
                                v-bind:show-progress-bar="temp.data.showProgressBar"
                                v-bind:customize-goods-tag="temp.data.customizeGoodsTag"
                                v-bind:is-under-line-price="temp.data.isUnderLinePrice"
                                v-bind:goods-tag-pic-url="temp.data.goodsTagPicUrl"
                                v-bind:theme="getTheme"
                                v-bind:bg="temp.data.bg"
                                v-bind:c-border-bottom="temp.data.c_border_bottom"
                                v-bind:c-border-top="temp.data.c_border_top"
                                v-bind:c-padding-lr="temp.data.c_padding_lr"
                            ></app-diy-goods-list>
                        </view>
                    </template>
                    <template v-else-if="temp.id === 'rubik'">
                        <view style="position: relative">
                            <app-image-ad
                                v-bind:image-style="temp.data.style"
                                v-bind:list="temp.data.list"
                                v-bind:height="temp.data.height"
                            ></app-image-ad>
                            <block v-for="(hotspot, hotspot_index) in temp.data.hotspot" v-bind:key="hotspot_index">
                                <app-hotspot v-bind:hotspot="rubikHotspot(hotspot)"></app-hotspot>
                            </block>
                        </view>
                    </template>
                    <template v-else-if="temp.id === 'video'">
                        <app-video
                            v-bind:pic-url="temp.data.pic_url"
                            v-bind:url="temp.data.url"
                            v-bind:has-auto="temp.data.hasAuto"
                            v-bind:has-cycle="temp.data.hasCycle"
                            v-bind:bg-padding="temp.data.bg_padding"
                            v-bind:c-border-bottom="temp.data.c_border_bottom"
                            v-bind:c-border-top="temp.data.c_border_top"
                            v-bind:c-padding-top="temp.data.c_padding_top"
                            v-bind:c-padding-lr="temp.data.c_padding_lr"
                            v-bind:c-padding-bottom="temp.data.c_padding_bottom"
                        ></app-video>
                    </template>
                    <template v-else-if="temp.id === 'image-text'">
                        <view style="padding: 1rpx 24rpx" :style="{backgroundColor: temp.data.bg || 'inherit'}">
                            <app-rich :image-prop="imageProp" v-bind:content='temp.data.content'></app-rich>
                        </view>
                    </template>
                </block>
            </view>
            <mch-share v-model="isShare" @share="hShareAppMessage" type="detail" :detail="detail"></mch-share>
        </view>
    </app-layout>
</template>

<script>
import mchShare from "../mch-share";
import appDiyGoodsList from "./../components/app-diy-goods-list.vue";
import {mapGetters, mapState} from "vuex";
import appRich from "../../../components/basic-component/app-rich/parse";
import appVideo from "../../../components/page-component/app-video/app-video";
import appImageAd from "../../../components/page-component/app-image-ad/app-image-ad";
import appHotspot from "../../../components/basic-component/app-hotspot/app-hotspot";

export default {
    name: "weitao-detail",
    components: {
        mchShare,
        appDiyGoodsList,
        appRich,
        appVideo,
        appImageAd,
        appHotspot,
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
        }),
        ...mapGetters('mallConfig', {
            getTheme: 'getTheme',
        }),
    },
    data() {
        return {
            imageProp: {
                mode: 'aspectFit',
                padding: 0,
                lazyLoad: false,
                domain: '',
                paddinglimit: 48,
            },
            mch_id: '',
            detail: {},
            params: {
                mch_id: '',
                id: '',
            },
            start: false,
            temp: {
                data: {}
            },

            isShare: false,
        }
    },
    onLoad(options) {
        this.$commonLoad.onload(options);
        Object.assign(this.params, options);
        this.loadData();
    },
    // #ifdef MP
    onShareAppMessage(object) {
        return this.hShareAppMessage();
    },
    // #endif
    methods: {
        transLabelBackgroundPosition(val) {
            val = Number(val);
            switch (val) {
                case 1:
                    return 'left top';
                case 2:
                    return 'center top';
                case 3:
                    return 'right top';
                case 4:
                    return 'left center';
                case 5:
                    return 'center center';
                case 6:
                    return 'right center';
                case 7:
                    return 'left bottom';
                case 8:
                    return 'center bottom';
                case 9:
                    return 'right bottom';
                default:
                    return 'center';
            }
        },
        transLabelBackgroundRepeat(val) {
            val = Number(val);
            switch (val) {
                case 1:
                    return 'no-repeat';
                case 2:
                    return 'repeat-x';
                case 3:
                    return 'repeat-y';
                case 4:
                    return 'repeat';
                default:
                    return 'no-repeat';
            }
        },
        rubikHotspot(hotspot) {
            if (hotspot && hotspot.link) {
                hotspot.link.url = hotspot.link.value;
                hotspot.link.openType = hotspot.link.open_type;
            }
            return hotspot;
        },

        hShareAppMessage(s = false) {
            let {share_title, share_pic_url, title, pic_url, abstract} = this.detail;
            return this.$shareAppMessage({
                title: share_title || title,
                imageUrl: !share_pic_url ? pic_url.length ? pic_url[0].pic_url : '' : share_pic_url,
                path: '/plugins/mch/shop/weitao-detail',
                desc: abstract,
                params: this.params
            }, s);
        },
        loadData() {
            this.$showLoading({title: '加载中'});
            this.start = false;
            this.$request({
                url: this.$api.mch.weitao_detail,
                data: this.params,
            }).then(info => {
                this.$hideLoading();
                if (info.code === 0) {
                    this.detail = info.data.detail;
                    this.start = true;
                    // #ifdef H5
                    this.hShareAppMessage();
                    // #endif
                } else {
                    uni.showToast({title: info.msg, icon: 'none'});
                }
            }).catch(info => {
                this.$hideLoading();
            })
        },
    }
}
</script>

<style scoped lang="scss">
.weitao-detail {
    background: white;
    min-height: 100vh;
    .detail-head {
        padding: 24#{rpx} 24#{rpx} 0;

        .detail-head-label {
            font-size: 40#{rpx};
            font-weight: bold;
            color: #333333;
            padding-bottom: 20#{rpx};
        }

        .detail-head-show-title {
            font-size: 28#{rpx};
            color: #999999;
            padding-bottom: #{20rpx};
        }

        .detail-head_share {
            margin-left: auto;

            > image {
                height: 40#{rpx};
                width: 40#{rpx};
                display: block;
            }

            > view {
                margin-left: 6#{rpx};
                font-size: 28#{rpx};
                color: #333333;
            }
        }
    }

    .detail-navbar {
        position: fixed;
        bottom: 0;
        z-index: 1001;
        width: 100%;
        height: 111#{rpx};
        background: white;

        > view {
            height: 100%;
            font-size: 28#{rpx};
            color: #333333;
        }

        .line {
            height: 40#{rpx};
            width: 1px;
            background: #cccccc;
        }

        image {
            height: 40#{rpx};
            width: 40#{rpx};
            display: block;
            margin-right: 20#{rpx};
        }
    }
}
</style>